<template>
  <div class="g-sd4">
    <div class="g-wrap7">
      <div v-if="subData.length">
      <h3 class="u-hd3">
        <span class="f-fl">喜欢这个歌单的人</span>
      </h3>
      <ul class="m-piclist f-cb">
          <li v-for="(item , index) in subData" :key="index">
              <a href="javascript:;" @click="toUser(item.userId)"><img :src="item.avatarUrl" :title="item.nickname"></a>
          </li>
      </ul>
      </div>
      <div v-if="hot_song.length">
      <h3 class="u-hd3">
         <span class="f-fl">热门歌单</span>
      </h3>
      <ul class="m-rctlist f-cb">
         <li v-for="(item , index) in hot_song" :key="index">
             <div class="cver u-cover u-cover-3">
                <a href="javascript:;">
                  <img :src="item.coverImgUrl">
                </a>
             </div>
             <div class="info">
                <p class="f-thide"><a href="javascript:;" class="sname f-fs1 s-fc0" @click.stop="toFatherId(item.id)">{{item.name}} </a></p>
                <p><span class="by s-fc4">by</span> <a class="nm nm f-thide s-fc3" href="javascript:;" title="琴师浊酒">{{item.creator.nickname}} </a></p>
             </div>
         </li>
      </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {playlist_sub} from '../../../network/song'
import {getHotSheet} from '../../../network/discover'
export default {
    props:['song_id'],
    data() {
        return {
            subData :[],
            hot_song:[]
        }
    },
    methods: {
      sub_user(song_id){   //喜欢这个歌单的人
        playlist_sub(song_id).then(res =>{
            if(res.data.subscribers.length >= 8){
              this.subData = res.data.subscribers.slice(0, 8)
            }else{
              this.subData = res.data.subscribers
            }
        })
      },
      hotList(){         //热门歌单
          getHotSheet('hot' ,'' , 5 , 0).then(res =>{
              this.hot_song = res.data.playlists
          })
      },
      toFatherId(id){
         this.$router.push({path:"/home/playlist" ,query:{id:id}});
      },
      toUser(uid){
          this.$router.push({ path: "/userHome", query: { id: uid } });
      }
    },
    watch:{
       song_id(value){        //监控侧边栏song_id的变化
         this.subData = []
        this.sub_user(value)
       }
    },
    created(){
        this.subData = []
        this.sub_user(this.song_id)
        this.hotList()
    }
}
</script>

<style scoped>
.g-sd4 {
  position: relative;
  float: right;
  width: 270px;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  zoom: 1;
}
.g-wrap7 {
  padding: 20px 40px 40px 30px;
}
.u-hd3 {
    position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
 h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
    padding: 0;
    margin: 0;
}
.f-fl {
    float: left;
}
.m-piclist {
    margin-left: -13px;
    padding-bottom: 25px;
}
.f-cb::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}
.m-piclist li {
    display: inline;
    padding: 0 0 13px 13px;
}
.m-piclist li, .m-piclist li img {
    float: left;
    width: 40px;
    height: 40px;
}
.m-rctlist {
    margin-bottom: 25px;
}
.m-rctlist li {
    float: left;
    width: 200px;
    height: 50px;
    margin-bottom: 15px;
    line-height: 24px;
}
.m-rctlist .cver, .n-rctlist .cver img {
    float: left;
    width: 50px;
    height: 50px;
}
.m-rctlist .info {
    margin-left: 60px;
    line-height: 24px;
}
.m-rctlist .info p {
    width: 140px;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.s-fc0{
    color: #000;
}
a.s-fc0:hover {
    
    border-bottom: 1.5px #000 solid;
}
.f-fs1 {
    font-size: 14px;
}
.m-rctlist .by {
    float: left;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.m-rctlist .nm {
    float: left;
    max-width: 106px;
    margin: 0 2px 0 4px;
}
.s-fc3, a.s-fc3:hover {
    color: #666;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
</style>